<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/float.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品"/></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="图书"/></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子"/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。
    </div>
</div>
</body>
</html>
